<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>完善资料</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		 <link href="css/iconfont.css" rel="stylesheet"/>
		 <link rel="stylesheet" href="css/default.css"/>
		<link rel="stylesheet" href="css/MUIxinyingCss.css"/>
	</head>
	<body class="mui-fullscreen">
		<!--页面主结构开始-->
		<div id="form_detailApp" class="mui-views">
			<div class="mui-view">
				<div class="mui-navbar">
				</div>
				<div class="mui-pages">
				</div>
			</div>
		</div>
		<!--页面主结构结束-->
		<!--单页面开始-->
		<div id="form" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav header_bar">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span><!--协议-->
				</button>
				<h1 class="mui-center mui-title">完善资料</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper form_detail_box">
					<div class="mui-scroll">
						<h2 class="mui-text-center form_detail_head">让我们了解一下你的基本情况吧</h2>
						<div class="mui-card">
							<ul class="mui-table-view">
								 <li class="mui-table-view-cell"><span>姓名：</span><input type="text" required="true" class="mui-input-clear" placeholder="张散"></li>
						         <li class="mui-table-view-cell mui-radio"><span>性别：</span><span class="sex_select">男 <input name="radio1" type="radio"> 女 <input name="radio1" type="radio" checked=""></span></li>
						         <li class="mui-table-view-cell"><span>年龄：</span><a href="#age_first" id="age_first_a" class="mui-navigate-right">20</a></li>
						         <li class="mui-table-view-cell forward_right"><span>身高：</span><input type="text" required="true" class="mui-input-clear" placeholder="168cm"></li>
						         <li class="mui-table-view-cell"><span>体重：</span><input type="text" required="true" class="mui-input-clear" placeholder="月经史"></li>
						         <li class="mui-table-view-cell"><span>邮箱：</span><a href="#email_input" class="mui-text-right email_input">***@**.com</a></li>
						         <li class="mui-table-view-cell"><span>QQ：</span><input type="text" required="true" class="mui-input-clear" placeholder="123456789"></li>
						         <li class="mui-table-view-cell"><span>家族住址：</span><input type="text" required="true" class="mui-input-clear addleng" placeholder="广东省广州市"></li>
						         <li class="mui-table-view-cell forward_right"><span>详细住址：</span><a href="#symptom" id="symptom_a" class="mui-navigate-right addleng">黄埔大道庆丰街222号</a></li>
							</ul>
							<div class="login_btn">
							     <a href="#regist_service">提交</a>
						   </div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--单页面结束-->
		<!--用户协议-->
		<div id="email_input" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav header_bar">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">邮箱</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper email_input_box">
					<div class="mui-scroll email_input_sroll">
						<div class="mui-content">
							<div class="mui-content-padded">
								<input type="text" class="mui-input-clear" placeholder="请输入邮箱地址" />
								<button type="button" class="mui-action-back mui-btn mui-text-center save_addr">
			保存
				</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div id="age_first" class="mui-popover mui-popover-action mui-popover-bottom">
			<h1 class="mui-text-center layer_head">请选择你的年龄</h1>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="##">22</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="##">33</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="##">44</a>
				</li>
			</ul>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-1.11.2.min.js"></script>
		<script src="js/mui.view.js "></script>
	</body>
	<script>
		mui.init();
		//初始化单页view
			var viewApi = mui('#form_detailApp').view({
				defaultPage: '#form'
			});
		//初始化单页的区域滚动
		mui('.mui-scroll-wrapper').scroll();
		var view = viewApi.view;
		(function($,doc) {
			//处理view的后退与webview后退
			var oldBack = $.back;
			$.back = function() {
				if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
					viewApi.back();
				} else { //执行webview后退
					oldBack();
				};
			};
		//选择首次婚育年龄
			mui('body').on('tap', '.mui-popover-action li>a', function() {
			var a = this,
				parent;
			//根据点击按钮，反推当前是哪个菜单
			for (parent = a.parentNode; parent != document.body; parent = parent.parentNode) {
				if(parent.id){
					switch(parent.id){
					case "age_first":
					document.querySelector("#age_first_a").innerHTML =a.innerHTML;
					break;
					case "symptom":
					document.querySelector("#symptom_a").innerHTML =a.innerHTML;
					break;
					default:
					break
					}; 
					//关闭菜单
					mui('#' + parent.id).popover('toggle');
				};
			};
			
		});
			
		})(mui,document);
		
	</script>

</html>